/**
 * time: 2025-09-16
 * author: XJ
 * description: 产品基本信息页面
 */

import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history, useLocation, useModel, useNavigate } from '@umijs/max';
import { Button, Form, Input, message, Row, Select, Space, Steps, TreeSelect, Upload } from 'antd';
import Dragger from 'antd/es/upload/Dragger';
import { Col } from 'antd/lib';
import area from '@/components/staticFile/region_options.json';
import TextArea from 'antd/es/input/TextArea';
import { register } from '@/services/apis/serviceProviderRegister';

const FORM_LAYOUT = {
  labelCol: { span: 5 }, // 调整标签宽度，避免长标签换行
  wrapperCol: { span: 19 },
  layout: 'horizontal' as const,
  
  size: 'middle' as const, // 统一表单控件尺寸
};
const ProductBaseInfoPage: React.FC = (props) => {
  const { stepProps, setStepProps } = useModel('PublishProduct.stepProps');
  const onFinish = (values: any) => { };
  const onFinishFailed = (values: any) => { };
  const navigate = useNavigate();
  const loaction = useLocation()

  const nextStep = () => {
    setStepProps((prev) => ({ ...prev, current: prev.current + 1 }));
  };
  function addSelectableToNonLeafNodes(data: any[]) {
    data.forEach((node: { children: string | any[]; selectable: boolean }) => {
      if (node.children && node.children.length > 0) {
        node.selectable = false;
        addSelectableToNonLeafNodes(node.children as any[]);
      }
    });
    return data;
  }

  const submitFun = (values: any) => {
    register(values).then(res => {
      const { code, data,msg } = res;
      if (code == "0") {
        // //message.success(data)
        navigate("/api_status_page", {
          state: {
            title: "服务商用户注册",
            message: msg,
            callbackUrl:"/user/login"
          }
        });
        // history.push("/api_status_page")
      }else{
        navigate("/api_status_page", {
          state: {
            title: "服务商用户注册",
            message: msg,
            callbackUrl:loaction.pathname
          }
        });
      }
    })
  }

  return (
    <div style={{ padding: 20, backgroundColor: '#f8f9fa', boxSizing: 'border-box' }}>
      <div
        style={{
          backgroundColor: '#fff',
          padding: 20,
          borderRadius: 8,
          boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
        }}
      >
        <div
          style={{
            fontSize: 16,
            fontWeight: 500,
            color: '#1f2937',
            marginBottom: 12,
          }}
        >
          账号信息
        </div>
        <Form onFinish={submitFun} {...FORM_LAYOUT}>
          <Form.Item
            label="服务商名称"
            name="username"
            style={{ marginBottom: 20 }}
            rules={[{ required: true, message: '请输入服务商名称' }]}
          >
            <Input placeholder="请输入服务商名称" />
          </Form.Item>
          <Form.Item
            label="登录密码"
            name="productPassword"
            style={{ marginBottom: 20 }}
            rules={[{ required: true, message: '请输入登录密码' }]}
          >
            <Input placeholder="请输入登录密码" />
          </Form.Item>
          <Form.Item
            label="注册地所在区(县、市)"
            name="loginInCity"
            rules={[{ required: true, message: '请选择注册城市' }]}
            style={{ marginBottom: 20 }}
            initialValue={'331100'}
          >
            <TreeSelect
              allowClear
              placeholder="请选择注册城市"
              disabled
              treeData={addSelectableToNonLeafNodes(area) as any}
            />
          </Form.Item>
          <Form.Item
            label="注册地址(注明属地街道)"
            name="addr"
            style={{ marginBottom: 20 }}
            rules={[{ required: true, message: '请输入注册地址' }]}
          >
            <Input placeholder="请输入注册地址" />
          </Form.Item>
          <Form.Item
            label="企业信用代码"
            name="enterpriseCode"
            style={{ marginBottom: 20 }}
            rules={[{ required: true, message: '请输入企业信用代码' }]}
          >
            <Input placeholder="请输入企业信用代码" />
          </Form.Item>
          <Form.Item
            label="服务商类型"
            name="fwslx"
            style={{ marginBottom: 20 }}
            rules={[{ required: true, message: '请输入服务商类型' }]}
          >
            <Input placeholder="请输入服务商类型" />
          </Form.Item>
          <Form.Item
            label="联系人"
            name="concatPerson"
            rules={[{ required: true, message: '请输入联系人' }]}
            style={{ marginBottom: 20 }}
          >
            <Input allowClear placeholder="请输入联系人" />
          </Form.Item>
          <Form.Item
            label="联系方式"
            name="concatPhone"
            rules={[
              { required: true, message: '请输入联系方式' },
              {
                validator(_, value) {
                  if (!value) return Promise.resolve();
                  const v = String(value).trim().replace(/\s+/g, '');
                  return /^1[3-9]\d{9}$/.test(v)
                    ? Promise.resolve()
                    : Promise.reject(new Error('请输入有效的中国手机号'));
                },
              },
            ]}
            style={{ marginBottom: 20 }}
          >
            <Input type="tel" maxLength={11} allowClear placeholder="请输入联系方式" />
          </Form.Item>
          <Form.Item
            label="服务商简介"
            name="productExplain"
            rules={[
              { required: true, message: '请输入服务商简介' },

            ]}
            style={{ marginBottom: 20 }}
          >
            <TextArea
              placeholder="请输入服务商简介"
              showCount
              maxLength={500}
              style={{
                minHeight: 120,
                maxHeight: 300,
                resize: 'vertical',
              }}
            />
          </Form.Item>
          <Form.Item label={null} style={{ marginTop: 40, textAlign: 'center' }}>
            <Button onClick={() => history.push("/user/login")} style={{ marginRight: 10 }} type="primary">
              返回
            </Button>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default ProductBaseInfoPage;
